スマホアプリでプロトタイプが必要なたった一つの理由

こんにちは！おおはしりきたけです。弊社ではFlexの開発をやっていたころからUIプロトタイピングで開発することが多く。特に最近のスマホ開発ではUIプロトタイピングが必須と言っても過言ではありません。

はじめに

皆さんは、プロジェクトを進めていく上で、要求を洗い出す、要件を整理する、ワイヤーフレームを作る、設計書を書く、ビジュアルデザインを作るといった作業をやることが多いと思います。こういった作業というのは、コミュニーケーションの手段であり、プロダクトやサービスのゴールに向けて成功の確率を高めてくための作業だと思っております。クラスメソッドは、クライアント側の開発が多く、ここ数年スマホ開発に携わっていますが、スマホ開発では初期段階でも「動くプロトタイプ」が必要だと体感しております。その理由を書かせていただきます。

結論

結論から説明させて頂きます。スマホアプリでUIプロトタイプを作るたった一つの理由ですが、『コレジャナイ感』を無くすためです。ユーザーストーリー、ワイヤーフレーム、ビジュアルデザインも問題なかったのに、出来上がってきたらコレジャナイ感だったことありませんか？

コレジャナイ感とは？

「コレジャナイ感」とは期待したものと何か微妙に違うものが出て来た時に出てくる感情の事です。類似語には「どうしてこうなった」があります。

プロトタイプを作る理由

プロトタイプやドキュメントを作る理由ですが、プロジェクトの成功確率を高めるための作業だと思っています。PCの時は大きい画面に情報整理することもでき、かつ一昔前のWebアプリでのPCの操作というのはクリックとスクロールくらいしかなかったため、ペーパープロトやワイヤーフレームといった動かないプロトタイピングでも成功確率を高める事が出来ましたが、スマホでは画面が小さい分、表示できる情報も制限されますし、タップ、ピンチイン/アウト、スワイプなど多様な操作が可能なため、動くプロトタイプでないとイメージしにくいという状況になっています。

一昔前のPCのWebアプリでの操作

• クリック
• スクロール

スマホでの操作

• タップ
• ダブルタップ
• ロングタップ
• フリック
• スワイプ
• ピンチイン
• ピンチアウト

操作可能な方法がPCに比べても格段に多いことが分かりますね。最近はPCでもJavaScriptでゴリゴリ動くWebアプリも増えており、ドラッグ＆ドロップなどの操作も増えています。

シンプル≠単純

スマホは画面も小さく、UIもよりシンプルにする必要があります。シンプルと単純は違います。iPhoneを見ていただければわかると思いますが、iPhoneシンプルではありますが、単純ではありません。UIをシンプルな動作にさせるために、一つ一つの操作が考え抜かれたUIになっていなければなりません。PCよりも画面が小さいし、UIもシンプルだからといって予算も小さくなりがちですが、それは間違いです。一つ一つの操作はシンプルになっている分、一つ一つの操作に対する役割が大きくなっています。役割は変わっていないので、予算を小さくする理由はありません。

直感的な操作

以下はJesse James Garrett氏の5 Planes Modelで、以下の階層に分かれています。

 

• 戦略（Strategy）
• 要件（Scope）
• 構造（Structure）
• 骨格（Skelton）
• 表面（Surface）

Strategyの部分であれば、ユーザーストーリで確認できますし、Structureの部分であればペーパープロトで確認できます。それぞれの部分については確認できる最適な手法でやっていく方法が良いと思いますが、上記の5つの軸がぶれていてはいけません。スマホの場合特にブレやすいと感じています。その理由の一つとして、スマホはPCやガラケーと違って操作が直感的です。直感的だからこそコレジャナイ感も出やすいです。また、画面遷移時のトランジションもただの効果ではなく、操作の役割の一つとして組み込まれることが多くなってきており、タッチからのUIがより直感的になっていると考えられます。

トランジションの存在感

上記にも書いた通り、スマホになって、よりトランジションが活用されてきています。トランジションというのは、文書で伝えるのは非常に難しいと思います。トランジションは擬音で表現されがちなので、メニューが「スッ」と横に開くとか、アラートが「メギャン」と出てくるとか言われても、100%の認識を合わせることはできません。また文書でUIの操作を事細かに記述されていてもUIがどのように動くかなんて理解できる人は少ないでしょう。

まとめ

スマホアプリ開発では、開発期間も短くなっています。上記の通りプロジェクト立ち上げ当初からプロトタイプを作ることにより、プロジェクトの成功確率を高める事ができます。一昔まえのWebであればSIerが仕様を決め開発会社に投げても開発後にブレが出てくることも少なく済みましたが、スマホの開発ではこのやり方では、成功確率は高くはならないと思っています。プロトタイプを当初から作っていき、「コレジャナイ感」ではなく、「キタコレ感」を伝えていくのが今後の開発のやり方だと思います。